import React, { PureComponent } from 'react';
import { Switch, Redirect, Route, Link } from 'react-router-dom';
import { Carousel, Row, Col, List, message,Avatar, Card } from 'antd';
import axios from 'axios'

import './shequ.css';

export default class Home extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      token: sessionStorage.getItem('token')
    }
  }
  componentDidMount() {
    this.getCard();
  }
  getCard = () => {
    axios({
      method: 'post',
      url: "http://localhost:8080/card/getAll",
      data: { token: this.state.token }
    }).then((res) => {
      if (res.data.code == 200) {
        this.setState({ data: res.data.data });

      } else {
        message.error("获取文章列表失败")
        throw res;
      }
    }).catch((e) => {
      message.error("获取文章列表失败")
      throw e;
    });
  }
  render() {
    const data = this.state.data;
    return (
      <div className='action'>
        <Row>
          <Col span="4">
            <Carousel autoplay>
              <div><img alt="example" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525796488903&di=1c2a2401683a46ac0f404dfc4bd2d0f3&imgtype=0&src=http%3A%2F%2Fimg.baizhan.net%2Fuploads%2Fallimg%2F170421%2F46_170421105224_1.jpg" /></div>
              <div><img alt="example" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3089035910,837232727&fm=27&gp=0.jpg" /></div>
              <div><img alt="example" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=599097939,2122370908&fm=27&gp=0.jpg" /></div>
              <div><img alt="example" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526391546&di=3353e261b2bcd1b3827575bfab617742&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.dugoogle.com%2Fwp-content%2Fuploads%2F2017%2F08%2FEEEEEEE.jpg" /></div>
            </Carousel>
          </Col>
          <Col span="20" >
            <List
              style={{ border: 'solid 1px #ccc', boxSizing: 'border-box', marginLeft: '16px' }}
              itemLayout="horizontal"
              dataSource={data}
              renderItem={item => (
                <List.Item>
                  <List.Item.Meta
                    avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                    title={<Link to={`/shequ/${item.id}`}>{item.title}</Link>}
                    description={(item.word + '').substring(0, 50) || ''}
                  />
                </List.Item>
              )}
            />
          </Col>
        </Row>
      </div >);
  }
}